<template>
  <div>
    <el-row class="tac">
    <el-col :span="12">
      <h5 class="mb-2">功能</h5>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
      >
        <el-menu-item index="1">
          <el-icon><icon-menu /></el-icon>
          <span>无</span>
        </el-menu-item>
        <el-menu-item index="2" @click="sj">
          <el-icon><icon-menu /></el-icon>
          <span>书籍</span>
        </el-menu-item>
      </el-menu>
      
    </el-col>
    <el-col :span="12">
      <el-table :data="books" style="width: 100%">
        <el-table-column label="书名" width="150">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><timer /></el-icon>
              <span style="margin-left: 10px">{{ scope.row.book_name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="笔名" width="150">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><timer /></el-icon>
              <span style="margin-left: 10px">{{ scope.row.pen_name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="150">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><timer /></el-icon>
              <span style="margin-left: 10px">{{ scope.row.book_price }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="时间" width="150">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><timer /></el-icon>
              <span style="margin-left: 10px">{{ scope.row.book_publicate_time }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="时间" width="150">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><timer /></el-icon>
              <el-button link type="primary" size="small" @click="handleClick(scope.row.auther_id)">{{scope.row.book_auther}}</el-button>
            </div>
          </template>
        </el-table-column>
        
    </el-table>
    </el-col>
  </el-row>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Home',
  components: {
  },
  data(){
    return{
      books:[{}],

    }
  },
  methods:{
      sj(){
          axios.get('http://127.0.0.1:5000/book/bookView').then((result) => {
      console.log("获取到的信息>>>>", result.data);
      this.books = result.data.data

    }).catch((err) => {
      console.log(err);
      
    });
      },
      handleClick(id){
        console.log(id);
        
      }
  },
  mounted(){
    
  }
}
</script>
